<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h2 {
        background-color: pink;
      }
      .box1 {
        width: 300px;
        height: 50px;
        background-color: skyblue;
      }
      .box2 {
        width: 300px;
        height: 50px;
        background-color: gold;
      }

      .box {
        width: 450px;
        background-color: skyblue;
        padding: 20px;
      }
      /* 
       img 和 表单元素是具有行内块元素的特点
       它们既能设置宽度高度、也能并排显示 
   */
      img {
        width: 200px;
      }
      input {
        width: 200px;
        margin-bottom: 10px;
      }

      span {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }

      /* display:none;隐藏元素 */
    </style>
  </head>
  <body>
    <!-- block 块级元素 -->
    <h2>div块级元素</h2>
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 独占一行
    可以设置 width、height 属性。
    在不设置宽情况下，宽默认为父元素内容区宽。
    块级元素里可以放任意类型元素，不过要注意
    文字类元素标签内不能放其它块元素
    p 标签里不能放 p 和 div 标签。
    h1-h6 标签里不能放 p，div 元素 -->

    <br /><br />
    <!-- inline-block 行内块元素 -->
    <div class="box">
      <input type="text" />
      <input type="text" />
      <img src="./海绵宝宝.jpg" alt="" />
      <img src="./海绵宝宝.jpg" alt="" />
      <img src="./海绵宝宝.jpg" alt="" />
    </div>
    <!-- 相邻的行内块（或行内）元素会在一行显示，放不下会换行。
    相邻的行内块元素之间会有空白间隙（后面案例中来解答这个问题）。
    元素默认宽为它本身内容宽
    可设置 width、height 属性 -->

    <br /><br />
    <!--  inline 内联（行内）元素 -->
    <!-- 相邻的行内元素会在一行显示，放不下时会换行显示
    设置 width、height 属性是无效的。其宽高随其内容大小而撑开。
    行内元素里只能放文本或其它行内元素
    注意：

    <a>标签中不能再放<a>标签
    但 a 标签中可以放块级元素
    实际开发中，在某些情况下会把 a 标签转换为块级元素 -->
    <span>我是span标签</span>
    <span>我是span标签</span>
    <span>我是span标签</span>
  </body>
</html>
